import React, { Component,Fragment} from 'react';
import TodoItem from './TodoItem';
//定义react组件，继承Component类
class TodoList extends Component {
  //组件的构造函数，组件被创建的一瞬间就会自动执行
  constructor(props) {
    super(props);//做初始化
    this.state = {
      list:[],
      inputValue:''
    }
    this.handleBtnClick=this.handleBtnClick.bind(this);
    this.handleInputChange=this.handleInputChange.bind(this);
    this.handleDelete=this.handleDelete.bind(this);
  }

  //添加list
  handleBtnClick() {
    //this.handleBtnClick
    //this指向的是button按钮
    // this.state.list.push('hello world');
    //this.handleBtnClick.bind(this)}这一句使得this指向TodoList
    // this.state.list.push('hello world');
    this.setState({
      list:[...this.state.list,this.state.inputValue],//相当于this.state.list.push('hello world');
      inputValue:''
    })
  }
  handleInputChange(e) {
    this.setState({
      inputValue:e.target.value
    })
  }

  //删除功能
  handleDelete(index){
    console.log(index)
    //建议拷贝副本，操作副本
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      //es6键值一样就可以省略写list:list
      list
    })
  }

  getTodoItem(){
    return(
      this.state.list.map((item,index)=>{
        return (
          <TodoItem 
            key={index} 
            content={item} 
            index={index} 
            delete={this.handleDelete}/>
        )
        //return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
      })
    )
  }

  //必须要有render    
  //父组件通过属性的形式向子组件传递参数，
  //子组件通过props接受父组件传递过来的参数      
  //用Fragment替换div可以去除页面渲染多余的div                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="insertArea">输入内容:</label>
          <input
            id="insertArea"
            className='input'
            value={this.state.inputValue} 
            onChange={this.handleInputChange}/>
          <button
            style={{background:'#448aff',color:'#ffffff',border:'1px solid #448aff',height: '22px',marginLeft: '10px'}} 
            onClick={this.handleBtnClick}>添加</button>
        </div>
        <ul>{this.getTodoItem()}</ul>
      </Fragment>
    );
  }
}

export default TodoList;
//直接使用标签的的语法叫作JSX语法。
//{1+2}js表达式
//react面向数据编程
//this指向和es6语法。